<template>
	<view class="tabbar">
		<uv-tabbar :value="current" @change="tabChange" :border="false" activeColor="#70430D" inactiveColor="#999999" 
			:customStyle="{ 'background': 'linear-gradient(0deg, #FDF8EF, #FDF2DC)', 'z-index': 1001 }">
			<uv-tabbar-item text="卜卦">
				<template v-slot:active-icon>
					<view class="icon">
						<image src="../static/bugua.png"></image>
						<div class="select-icon">
							<image class="select-icon-img" src="../static/tab-select.png"></image>
						</div>
					</view>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="../static/bugua.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="易经">
				<template v-slot:active-icon>
					<view class="icon">
						<image src="../static/yijing.png"></image>
						<div class="select-icon">
							<image class="select-icon-img" src="../static/tab-select.png"></image>
						</div>
					</view>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="../static/yijing.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="查卦">
				<template v-slot:active-icon>
					<view class="icon">
						<image src="../static/chagua.png"></image>
						<div class="select-icon">
							<image class="select-icon-img" src="../static/tab-select.png"></image>
						</div>
					</view>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="../static/chagua.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的">
				<template v-slot:active-icon>
					<view class="icon">
						<image src="../static/mine.png"></image>
						<div class="select-icon">
							<image class="select-icon-img" src="../static/tab-select.png"></image>
						</div>
					</view>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="../static/mine.png"></image>
				</template>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineProps, withDefaults } from 'vue'
	import { getPlatform, appLogin } from '@/common/tool'
	import { useCommonStore } from '@/stores/common'
	const { userInfo } = useCommonStore()
	
	withDefaults(defineProps<{
		current: number
	}>(), {
		current: 0
	})
	
	const tabChange = (index: number) => {

		switch(index) {
			case 0: 
			uni.switchTab({
				url: '/pages/home/home'
			})
			break;
			case 1:
			uni.switchTab({
				url: '/pages/yiJing/yiJing'
			})
			break;
			case 2:
			uni.switchTab({
				url: '/pages/viewGua/viewGua'
			})
			break;
			case 3:
			if(!(userInfo.customerInfo && userInfo.customerInfo.customerUid) && getPlatform() == 'APP') {
				appLogin(() => {
					uni.closeAuthView() //关闭授权登录界面
					uni.switchTab({
						url: '/pages/mine/mine'
					})
				})
				return
			}
			uni.switchTab({
				url: '/pages/mine/mine'
			})
			
			break;
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		background: linear-gradient(0deg, #FDF8EF, #FDF2DC);
	}
	.icon {
		width: 30px !important;
		height: 30px !important;
		position: relative;
	}
	.select-icon {
		position: absolute;
		top: -25px;
		left: -25px;
		width: 80px;
		height: 80px;
		.select-icon-img {
			animation: tabAnimate 8s linear infinite;
		}
	}
	@keyframes tabAnimate{
	    0%{
	        transform: rotate(0);
	    }
	    
		100%{
		    transform: rotate(360deg) ;
		}
	}
</style>
